<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫跳跃 - 完美版</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #game-container {
            position: relative;
            width: 100%;
            height: 100vh;
            max-width: 480px;
            max-height: 800px;
            background: linear-gradient(180deg, #87CEEB 0%, #E0F7FA 100%);
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            border-radius: 15px;
        }

        #game-canvas {
            width: 100%;
            height: 100%;
            display: block;
            background: #87CEEB;
        }

        .game-info {
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            display: flex;
            justify-content: space-between;
            color: #333;
            font-size: 18px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
            z-index: 10;
        }

        .controls {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
            z-index: 10;
        }

        .control-btn {
            background: rgba(255,255,255,0.8);
            border: 3px solid #333;
            border-radius: 50%;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
        }

        .control-btn:active {
            transform: scale(0.95);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        .power-bar {
            position: absolute;
            bottom: 130px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 20px;
            background: rgba(255,255,255,0.3);
            border: 3px solid #333;
            border-radius: 10px;
            overflow: hidden;
        }

        .power-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #FFC107, #FF5722);
            width: 0%;
            transition: width 0.1s ease;
        }

        .start-screen {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(0,0,0,0.5);
            z-index: 20;
            color: white;
            text-align: center;
            padding: 20px;
        }

        .start-screen h1 {
            font-size: 36px;
            margin-bottom: 20px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
        }

        .start-screen p {
            font-size: 18px;
            margin-bottom: 30px;
            line-height: 1.5;
        }

        .start-btn {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 50px;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
        }

        .start-btn:hover {
            transform: scale(1.05);
            background: #45a049;
        }

        .game-over {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(0,0,0,0.7);
            z-index: 20;
            color: white;
            text-align: center;
            padding: 20px;
        }

        .game-over h2 {
            font-size: 40px;
            margin-bottom: 20px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
        }

        .game-over p {
            font-size: 20px;
            margin-bottom: 30px;
        }

        .restart-btn {
            background: #FF5722;
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 50px;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        .restart-btn:hover {
            transform: scale(1.05);
            background: #E64A19;
        }

        .menu-btn {
            background: #2196F3;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
        }

        .menu-btn:hover {
            transform: scale(1.05);
            background: #1976D2;
        }

        @media (max-width: 480px) {
            .control-btn {
                width: 70px;
                height: 70px;
                font-size: 20px;
            }
            
            .power-bar {
                width: 160px;
                height: 16px;
            }
        }
    </style>
</head>
<body>
    <div id="game-container">
        <canvas id="game-canvas"></canvas>
        
        <div class="game-info">
            <div>分数: <span id="score">0</span></div>
            <div>高度: <span id="height">0</span>m</div>
        </div>
        
        <div class="power-bar">
            <div id="power-fill" class="power-fill"></div>
        </div>
        
        <div class="controls">
            <div id="left-btn" class="control-btn">◀ 左移</div>
            <div id="jump-btn" class="control-btn">长按跳跃</div>
            <div id="right-btn" class="control-btn">右移 ▶</div>
        </div>
        
        <div id="start-screen" class="start-screen">
            <h1>🐼 熊猫跳跃</h1>
            <p>◀▶ 左右移动，长按蓄力跳跃！智能相机跟随，无限向上挑战！</p>
            <p>💡 小贴士：跳到高处后，相机会自动向下跟随，寻找新的平台！</p>
            <button id="start-btn" class="start-btn">开始游戏</button>
        </div>
        
        <div id="game-over" class="game-over">
            <h2>游戏结束</h2>
            <p>最终分数: <span id="final-score">0</span></p>
            <p>最高高度: <span id="final-height">0</span>m</p>
            <button id="restart-btn" class="restart-btn">重新开始</button>
            <button id="menu-btn" class="menu-btn">返回主菜单</button>
        </div>
    </div>

    <script>
        class PandaJumpGame {
            constructor() {
                this.canvas = document.getElementById('game-canvas');
                this.ctx = this.canvas.getContext('2d');
                
                this.scoreElement = document.getElementById('score');
                this.heightElement = document.getElementById('height');
                this.powerFill = document.getElementById('power-fill');
                this.startScreen = document.getElementById('start-screen');
                this.gameOver = document.getElementById('game-over');
                this.startBtn = document.getElementById('start-btn');
                this.restartBtn = document.getElementById('restart-btn');
                this.menuBtn = document.getElementById('menu-btn');
                this.jumpBtn = document.getElementById('jump-btn');
                this.leftBtn = document.getElementById('left-btn');
                this.rightBtn = document.getElementById('right-btn');
                
                this.isRunning = false;
                this.isGameOver = false;
                this.isJumping = false;
                this.jumpPower = 0;
                this.maxJumpPower = 100;
                this.jumpPowerRate = 2;
                
                this.gameWidth = 0;
                this.gameHeight = 0;
                
                this.panda = {
                    x: 0,
                    y: 0,
                    width: 60,
                    height: 60,
                    vx: 0,
                    vy: 0,
                    gravity: 0.6,
                    jumpForce: 0,
                    moveSpeed: 4,
                    maxSpeed: 6,
                    onGround: false,
                    facing: 1
                };
                
                this.camera = {
                    y: 0,
                    targetY: 0,
                    speed: 5,  // 提高相机速度
                    minY: 0,
                    maxY: 0,
                    followMode: 'up'
                };
                
                this.clouds = [];
                this.obstacles = [];
                this.score = 0;
                this.height = 0;
                
                this.isMovingLeft = false;
                this.isMovingRight = false;
                
                this.lastTime = 0;
                
                this.init();
            }
            
            init() {
                this.resizeCanvas();
                window.addEventListener('resize', () => this.resizeCanvas());
                
                // 开始按钮
                this.startBtn.addEventListener('click', () => this.startGame());
                
                // 重新开始按钮
                this.restartBtn.addEventListener('click', () => this.restartGame());
                
                // 返回主菜单按钮
                this.menuBtn.addEventListener('click', () => this.showStartScreen());
                
                // 跳跃按钮
                this.jumpBtn.addEventListener('mousedown', (e) => this.startJump(e));
                this.jumpBtn.addEventListener('touchstart', (e) => this.startJump(e), { passive: false });
                
                // 移动按钮
                this.leftBtn.addEventListener('mousedown', () => this.startMoveLeft());
                this.leftBtn.addEventListener('touchstart', () => this.startMoveLeft(), { passive: false });
                
                this.rightBtn.addEventListener('mousedown', () => this.startMoveRight());
                this.rightBtn.addEventListener('touchstart', () => this.startMoveRight(), { passive: false });
                
                window.addEventListener('mouseup', () => {
                    this.endJump();
                    this.stopMove();
                });
                window.addEventListener('touchend', () => {
                    this.endJump();
                    this.stopMove();
                });
                
                // 键盘控制
                window.addEventListener('keydown', (e) => {
                    switch(e.code) {
                        case 'ArrowLeft':
                        case 'A':
                            this.startMoveLeft();
                            break;
                        case 'ArrowRight':
                        case 'D':
                            this.startMoveRight();
                            break;
                        case 'Space':
                            this.startJump();
                            break;
                    }
                });
                
                window.addEventListener('keyup', (e) => {
                    switch(e.code) {
                        case 'ArrowLeft':
                        case 'A':
                        case 'ArrowRight':
                        case 'D':
                            this.stopMove();
                            break;
                        case 'Space':
                            this.endJump();
                            break;
                    }
                });
                
                this.resetGame();
            }
            
            resizeCanvas() {
                const container = document.getElementById('game-container');
                this.gameWidth = container.clientWidth;
                this.gameHeight = container.clientHeight;
                
                this.canvas.width = this.gameWidth;
                this.canvas.height = this.gameHeight;
                
                this.panda.x = this.gameWidth / 2 - this.panda.width / 2;
                this.panda.y = this.gameHeight - 150;
                
                this.camera.minY = 0;
                this.camera.maxY = 100000;
            }
            
            resetGame() {
                this.isRunning = false;
                this.isGameOver = false;
                this.score = 0;
                this.height = 0;
                
                // 重置熊猫位置到屏幕中间偏下的位置
                this.panda.x = this.gameWidth / 2 - this.panda.width / 2;
                this.panda.y = this.camera.targetY + this.gameHeight * 0.7; // 屏幕70%高度处
                this.panda.vx = 0;
                this.panda.vy = 0;
                this.panda.onGround = false;
                
                // 重置相机到熊猫位置
                this.camera.y = this.panda.y - this.gameHeight * 0.7;
                this.camera.targetY = this.camera.y;
                this.camera.followMode = 'up';
                
                this.clouds = [];
                this.obstacles = [];
                
                this.generateInitialPlatforms();
                
                this.updateUI();
                this.startScreen.style.display = 'flex';
                this.gameOver.style.display = 'none';
            }
            
            showStartScreen() {
                this.isRunning = false;
                this.isGameOver = false;
                this.gameOver.style.display = 'none';
                this.startScreen.style.display = 'flex';
            }
            
            startGame() {
                this.isRunning = true;
                this.startScreen.style.display = 'none';
                this.lastTime = performance.now();
                requestAnimationFrame((time) => this.gameLoop(time));
            }
            
            restartGame() {
                this.resetGame();
                this.startGame();
            }
            
            gameLoop(time) {
                if (!this.isRunning || this.isGameOver) return;
                
                const deltaTime = time - this.lastTime;
                this.lastTime = time;
                
                this.update(deltaTime);
                this.render();
                
                requestAnimationFrame((time) => this.gameLoop(time));
            }
            
            update(deltaTime) {
                if (this.isJumping) {
                    this.jumpPower = Math.min(this.maxJumpPower, this.jumpPower + this.jumpPowerRate);
                    this.powerFill.style.width = `${(this.jumpPower / this.maxJumpPower) * 100}%`;
                }
                
                // 更新熊猫
                this.updatePanda(deltaTime);
                
                // 更新相机
                this.updateCamera();
                
                // 生成新平台
                this.generatePlatforms();
                
                // 更新障碍物
                this.updateObstacles();
                
                // 检查碰撞
                this.checkCollisions();
                
                // 更新分数和高度
                this.updateScoreAndHeight();
                
                // 检查游戏结束
                this.checkGameOver();
            }
            
            updatePanda(deltaTime) {
                // 左右移动
                if (this.isMovingLeft) {
                    this.panda.vx -= 0.3;
                    this.panda.facing = -1;
                } else if (this.isMovingRight) {
                    this.panda.vx += 0.3;
                    this.panda.facing = 1;
                } else {
                    // 摩擦力
                    if (this.panda.vx > 0) {
                        this.panda.vx -= 0.2;
                        if (this.panda.vx < 0) this.panda.vx = 0;
                    } else if (this.panda.vx < 0) {
                        this.panda.vx += 0.2;
                        if (this.panda.vx > 0) this.panda.vx = 0;
                    }
                }
                
                // 限制最大速度
                this.panda.vx = Math.max(-this.panda.maxSpeed, Math.min(this.panda.maxSpeed, this.panda.vx));
                
                // 应用重力
                this.panda.vy += this.panda.gravity;
                
                // 更新位置
                this.panda.x += this.panda.vx;
                this.panda.y += this.panda.vy;
                
                // 边界检查
                if (this.panda.x < 0) {
                    this.panda.x = 0;
                    this.panda.vx = 0;
                }
                if (this.panda.x + this.panda.width > this.gameWidth) {
                    this.panda.x = this.gameWidth - this.panda.width;
                    this.panda.vx = 0;
                }
                
                // 如果掉出屏幕底部，游戏结束
                if (this.panda.y > this.camera.y + this.gameHeight + 100) {
                    this.gameOver();
                }
            }
            
            updateCamera() {
                const pandaScreenY = this.panda.y - this.camera.y;
                const centerTop = this.gameHeight * 0.3;
                const centerBottom = this.gameHeight * 0.7;
                
                if (this.camera.followMode === 'up') {
                    // 向上跟随模式：熊猫在屏幕下部时向上跟随
                    if (pandaScreenY > centerBottom) {
                        // 熊猫在屏幕下部，相机快速向上跟随
                        const targetY = this.panda.y - centerBottom;
                        this.camera.targetY = Math.max(this.camera.minY, targetY);
                    } else {
                        // 熊猫在屏幕中上部，寻找下方是否有平台
                        if (this.hasPlatformsBelow()) {
                            this.camera.followMode = 'down';
                        }
                    }
                } else {
                    // 向下跟随模式：寻找下方平台
                    if (pandaScreenY < centerTop) {
                        // 熊猫在屏幕上部，相机快速向下跟随
                        const targetY = this.panda.y - centerTop;
                        this.camera.targetY = Math.max(this.camera.minY, targetY);
                    } else {
                        // 熊猫在屏幕中下部，寻找可跳的平台
                        if (this.hasPlatformsAbove()) {
                            this.camera.followMode = 'up';
                        }
                    }
                }
                
                // 快速平滑移动相机
                this.camera.y += (this.camera.targetY - this.camera.y) * 0.3;
                
                // 确保相机不会超出边界
                this.camera.y = Math.max(this.camera.minY, this.camera.y);
            }
            
            hasPlatformsBelow() {
                const searchRange = 300; // 扩大搜索范围
                
                for (const cloud of this.clouds) {
                    // 检查平台是否在熊猫下方且在搜索范围内
                    if (cloud.y > this.panda.y && cloud.y < this.panda.y + searchRange) {
                        return true;
                    }
                }
                return false;
            }
            
            hasPlatformsAbove() {
                const searchRange = 400; // 扩大搜索范围
                
                for (const cloud of this.clouds) {
                    // 检查平台是否在熊猫上方且在跳跃范围内
                    if (cloud.y < this.panda.y && cloud.y > this.panda.y - searchRange) {
                        return true;
                    }
                }
                return false;
            }
            
            startMoveLeft() {
                if (!this.isRunning || this.isGameOver) return;
                this.isMovingLeft = true;
                this.isMovingRight = false;
            }
            
            startMoveRight() {
                if (!this.isRunning || this.isGameOver) return;
                this.isMovingRight = true;
                this.isMovingLeft = false;
            }
            
            stopMove() {
                this.isMovingLeft = false;
                this.isMovingRight = false;
            }
            
            startJump(e) {
                if (e) e.preventDefault();
                if (!this.isRunning || this.isGameOver) return;
                
                this.isJumping = true;
                this.jumpPower = 0;
            }
            
            endJump() {
                if (!this.isJumping) return;
                
                this.isJumping = false;
                
                // 根据蓄力计算跳跃力度和方向
                const jumpForce = 12 + (this.jumpPower / this.maxJumpPower) * 8;
                const jumpAngle = this.panda.facing;
                
                // 跳跃力度分解为水平和垂直分量
                this.panda.vy = -jumpForce;
                this.panda.vx += jumpAngle * (jumpForce * 0.3);
                
                this.panda.onGround = false;
                
                this.powerFill.style.width = '0%';
            }
            
            generateInitialPlatforms() {
                // 生成一个大的初始平台范围
                const startY = this.panda.y - this.gameHeight * 0.5;
                
                // 生成上方平台
                for (let i = 0; i < 15; i++) {
                    const x = Math.random() * (this.gameWidth - 120);
                    const y = startY - i * 80;
                    const width = 120 + Math.random() * 80;
                    
                    this.clouds.push({
                        x: x,
                        y: y,
                        width: width,
                        height: 20,
                        type: Math.random() < 0.7 ? 'cloud' : 'platform',
                        speed: (Math.random() - 0.5) * 1.5,
                        direction: Math.random() < 0.5 ? -1 : 1
                    });
                }
                
                // 生成下方平台
                for (let i = 0; i < 10; i++) {
                    const x = Math.random() * (this.gameWidth - 120);
                    const y = startY + this.gameHeight + i * 80;
                    const width = 120 + Math.random() * 80;
                    
                    this.clouds.push({
                        x: x,
                        y: y,
                        width: width,
                        height: 20,
                        type: Math.random() < 0.7 ? 'cloud' : 'platform',
                        speed: (Math.random() - 0.5) * 1.5,
                        direction: Math.random() < 0.5 ? -1 : 1
                    });
                }
            }
            
            generatePlatforms() {
                const cameraTop = this.camera.y;
                const cameraBottom = this.camera.y + this.gameHeight;
                
                // 检查上方是否需要生成平台
                const lastCloudAbove = this.clouds.filter(c => c.y < cameraTop).sort((a, b) => b.y - a.y)[0];
                if (!lastCloudAbove || lastCloudAbove.y < cameraTop - 300) {
                    for (let i = 0; i < 3; i++) {
                        const x = Math.random() * (this.gameWidth - 120);
                        const y = cameraTop - 150 - i * 100;
                        const width = 120 + Math.random() * 80;
                        
                        this.clouds.push({
                            x: x,
                            y: y,
                            width: width,
                            height: 20,
                            type: Math.random() < 0.7 ? 'cloud' : 'platform',
                            speed: (Math.random() - 0.5) * 2,
                            direction: Math.random() < 0.5 ? -1 : 1
                        });
                    }
                }
                
                // 检查下方是否需要生成平台
                const lastCloudBelow = this.clouds.filter(c => c.y > cameraBottom).sort((a, b) => a.y - b.y)[0];
                if (!lastCloudBelow || lastCloudBelow.y > cameraBottom + 300) {
                    for (let i = 0; i < 3; i++) {
                        const x = Math.random() * (this.gameWidth - 120);
                        const y = cameraBottom + 150 + i * 100;
                        const width = 120 + Math.random() * 80;
                        
                        this.clouds.push({
                            x: x,
                            y: y,
                            width: width,
                            height: 20,
                            type: Math.random() < 0.7 ? 'cloud' : 'platform',
                            speed: (Math.random() - 0.5) * 2,
                            direction: Math.random() < 0.5 ? -1 : 1
                        });
                        
                        // 30%概率生成移动障碍物
                        if (Math.random() < 0.3) {
                            this.obstacles.push({
                                x: x + width / 2 - 20,
                                y: y - 40,
                                width: 40,
                                height: 40,
                                vy: -1 - Math.random() * 2,
                                speed: 2 + Math.random() * 2,
                                direction: Math.random() < 0.5 ? -1 : 1
                            });
                        }
                    }
                }
            }
            
            updateObstacles() {
                for (let i = this.obstacles.length - 1; i >= 0; i--) {
                    const obs = this.obstacles[i];
                    
                    // 水平移动
                    obs.x += obs.speed * obs.direction;
                    
                    // 边界反弹
                    if (obs.x < 0 || obs.x + obs.width > this.gameWidth) {
                        obs.direction *= -1;
                    }
                    
                    // 垂直移动
                    obs.y += obs.vy;
                    obs.vy += 0.2;
                    
                    // 移除屏幕外的障碍物
                    if (obs.y > this.camera.y + this.gameHeight + 100 || obs.y < this.camera.y - 100) {
                        this.obstacles.splice(i, 1);
                    }
                }
            }
            
            checkCollisions() {
                // 检查与云朵的碰撞
                for (let i = 0; i < this.clouds.length; i++) {
                    const cloud = this.clouds[i];
                    
                    if (cloud.y < this.camera.y - 300 || cloud.y > this.camera.y + this.gameHeight + 300) {
                        continue;
                    }
                    
                    if (this.checkPlatformCollision(this.panda, cloud)) {
                        if (this.panda.vy > 0) {
                            this.panda.y = cloud.y - this.panda.height;
                            this.panda.vy = 0;
                            this.panda.onGround = true;
                            
                            if (cloud.type === 'cloud') {
                                this.panda.y += 2;
                            }
                        }
                    }
                }
                
                // 检查与障碍物的碰撞
                for (let i = this.obstacles.length - 1; i >= 0; i--) {
                    const obs = this.obstacles[i];
                    
                    if (this.checkCollision(this.panda, obs)) {
                        this.gameOver();
                        break;
                    }
                }
            }
            
            checkPlatformCollision(panda, platform) {
                return panda.x < platform.x + platform.width &&
                       panda.x + panda.width > platform.x &&
                       panda.y + panda.height > platform.y &&
                       panda.y + panda.height < platform.y + platform.height + 10 &&
                       panda.vy >= 0;
            }
            
            checkCollision(rect1, rect2) {
                return rect1.x < rect2.x + rect2.width &&
                       rect1.x + rect1.width > rect2.x &&
                       rect1.y < rect2.y + rect2.height &&
                       rect1.y + rect1.height > rect2.y;
            }
            
            updateScoreAndHeight() {
                // 基于相机位置计算高度
                const newHeight = Math.floor(this.camera.y / 10);
                if (newHeight > this.height) {
                    this.height = newHeight;
                }
                
                this.score = this.height + Math.floor(this.clouds.length / 10);
                this.updateUI();
            }
            
            updateUI() {
                this.scoreElement.textContent = this.score;
                this.heightElement.textContent = this.height;
            }
            
            checkGameOver() {
                if (this.panda.y > this.camera.y + this.gameHeight + 100) {
                    this.gameOver();
                }
            }
            
            gameOver() {
                if (this.isGameOver) return;
                
                this.isGameOver = true;
                this.isRunning = false;
                
                this.gameOver.style.display = 'flex';
                document.getElementById('final-score').textContent = this.score;
                document.getElementById('final-height').textContent = this.height;
            }
            
            render() {
                const ctx = this.ctx;
                
                // 清空画布
                ctx.clearRect(0, 0, this.gameWidth, this.gameHeight);
                
                // 绘制背景
                this.drawBackground();
                
                // 保存画布状态
                ctx.save();
                
                // 设置相机变换
                ctx.translate(0, -this.camera.y);
                
                // 绘制云朵
                this.drawClouds();
                
                // 绘制障碍物
                this.drawObstacles();
                
                // 绘制熊猫
                this.drawPanda();
                
                // 恢复画布状态
                ctx.restore();
            }
            
            drawBackground() {
                const ctx = this.ctx;
                
                // 绘制渐变背景
                const gradient = ctx.createLinearGradient(0, 0, 0, this.gameHeight * 5);
                gradient.addColorStop(0, '#87CEEB');
                gradient.addColorStop(0.3, '#B3E5FC');
                gradient.addColorStop(0.6, '#E0F7FA');
                gradient.addColorStop(1, '#F3E5F5');
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, this.gameWidth, this.gameHeight * 5);
                
                // 绘制远山
                ctx.fillStyle = 'rgba(100, 150, 200, 0.3)';
                ctx.beginPath();
                ctx.moveTo(0, this.gameHeight - 200);
                ctx.lineTo(100, this.gameHeight - 300);
                ctx.lineTo(200, this.gameHeight - 250);
                ctx.lineTo(300, this.gameHeight - 350);
                ctx.lineTo(this.gameWidth, this.gameHeight - 300);
                ctx.lineTo(this.gameWidth, this.gameHeight * 5);
                ctx.lineTo(0, this.gameHeight * 5);
                ctx.closePath();
                ctx.fill();
            }
            
            drawClouds() {
                const ctx = this.ctx;
                
                for (const cloud of this.clouds) {
                    // 更新云朵位置
                    cloud.x += cloud.speed * cloud.direction;
                    
                    // 边界反弹
                    if (cloud.x < 0 || cloud.x + cloud.width > this.gameWidth) {
                        cloud.direction *= -1;
                    }
                    
                    if (cloud.y < this.camera.y - 300 || cloud.y > this.camera.y + this.gameHeight + 300) {
                        continue;
                    }
                    
                    if (cloud.type === 'cloud') {
                        // 绘制云朵
                        ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
                        ctx.beginPath();
                        ctx.arc(cloud.x + 20, cloud.y + 10, 15, 0, Math.PI * 2);
                        ctx.arc(cloud.x + 40, cloud.y + 5, 20, 0, Math.PI * 2);
                        ctx.arc(cloud.x + 65, cloud.y + 12, 18, 0, Math.PI * 2);
                        ctx.arc(cloud.x + 45, cloud.y + 20, 15, 0, Math.PI * 2);
                        ctx.fill();
                        
                        // 云朵阴影
                        ctx.fillStyle = 'rgba(200, 200, 200, 0.3)';
                        ctx.fillRect(cloud.x, cloud.y + 18, cloud.width, 4);
                    } else {
                        // 绘制平台
                        ctx.fillStyle = '#8B4513';
                        ctx.fillRect(cloud.x, cloud.y, cloud.width, cloud.height);
                        
                        // 平台纹理
                        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
                        for (let i = 0; i < cloud.width; i += 20) {
                            ctx.fillRect(cloud.x + i, cloud.y + 5, 10, 2);
                        }
                    }
                }
            }
            
            drawObstacles() {
                const ctx = this.ctx;
                
                for (const obs of this.obstacles) {
                    // 绘制障碍物
                    ctx.fillStyle = '#FF6B6B';
                    ctx.beginPath();
                    ctx.moveTo(obs.x + obs.width / 2, obs.y);
                    ctx.lineTo(obs.x + obs.width, obs.y + obs.height);
                    ctx.lineTo(obs.x, obs.y + obs.height);
                    ctx.closePath();
                    ctx.fill();
                    
                    // 障碍物眼睛
                    ctx.fillStyle = 'white';
                    ctx.beginPath();
                    ctx.arc(obs.x + 12, obs.y + 15, 5, 0, Math.PI * 2);
                    ctx.arc(obs.x + 28, obs.y + 15, 5, 0, Math.PI * 2);
                    ctx.fill();
                    
                    ctx.fillStyle = 'black';
                    ctx.beginPath();
                    ctx.arc(obs.x + 12, obs.y + 15, 2, 0, Math.PI * 2);
                    ctx.arc(obs.x + 28, obs.y + 15, 2, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
            
            drawPanda() {
                const ctx = this.ctx;
                const panda = this.panda;
                
                // 绘制熊猫身体
                ctx.fillStyle = '#222';
                ctx.beginPath();
                ctx.arc(panda.x + 30, panda.y + 35, 25, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制熊猫头部
                ctx.fillStyle = '#222';
                ctx.beginPath();
                ctx.arc(panda.x + 30, panda.y + 15, 20, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制熊猫脸部
                ctx.fillStyle = '#FFF';
                ctx.beginPath();
                ctx.arc(panda.x + 30, panda.y + 15, 15, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制熊猫耳朵
                ctx.fillStyle = '#222';
                ctx.beginPath();
                ctx.arc(panda.x + 20, panda.y + 5, 8, 0, Math.PI * 2);
                ctx.arc(panda.x + 40, panda.y + 5, 8, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制熊猫眼睛
                ctx.fillStyle = '#222';
                ctx.beginPath();
                ctx.arc(panda.x + 25, panda.y + 12, 4, 0, Math.PI * 2);
                ctx.arc(panda.x + 35, panda.y + 12, 4, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制熊猫鼻子
                ctx.fillStyle = '#222';
                ctx.beginPath();
                ctx.arc(panda.x + 30, panda.y + 18, 2, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制熊猫嘴巴
                ctx.strokeStyle = '#222';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.arc(panda.x + 30, panda.y + 22, 5, Math.PI, Math.PI * 2);
                ctx.stroke();
                
                // 绘制熊猫手臂
                ctx.fillStyle = '#222';
                ctx.fillRect(panda.x + 10, panda.y + 30, 10, 15);
                ctx.fillRect(panda.x + 40, panda.y + 30, 10, 15);
                
                // 绘制熊猫腿部
                ctx.fillRect(panda.x + 15, panda.y + 50, 12, 10);
                ctx.fillRect(panda.x + 33, panda.y + 50, 12, 10);
                
                // 根据移动方向调整姿势
                if (this.panda.vx > 0.5) {
                    // 向右移动
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
                    ctx.fillRect(panda.x + 50, panda.y + 55, 10, 8);
                } else if (this.panda.vx < -0.5) {
                    // 向左移动
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
                    ctx.fillRect(panda.x, panda.y + 55, 10, 8);
                }
                
                // 跳跃时的动画
                if (this.panda.vy < 0) {
                    // 向上跳跃
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
                    ctx.beginPath();
                    ctx.ellipse(panda.x + 30, panda.y + 65, 25, 8, 0, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
        }
        
        // 启动游戏
        const game = new PandaJumpGame();
    </script>
</body>
</html>